<script setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus';
import axios from "axios";
import {nextTick, onMounted, reactive, ref} from 'vue';
import {Refresh, Search} from "@element-plus/icons-vue";
import {ElLoading} from 'element-plus'
import router from "@/router";


const fromLabelWidth = '140px';

let tableData = ref([])
let form = ref({
  favoriteId: '',
  courseId: '',
  memberId: '',
  favoriteTime: '',
})




//   显示全部
const testGet = () => {
  axios.get("/coursefavorite")
      .then(resp => {
        tableData.value = resp.data.data;
      })
      .catch((err) => {
        console.log(err);
      })
}


//搜索
let shoucangbianhao = ref();
const search = () => {
  axios.get("/coursefavorite/id",
      {
        params: {
          favoriteId: shoucangbianhao.value,
        },
        // header:{'Content-Type': 'multipart/form-data' }
      })
      .then(resp => {
        console.log(resp.data);
        tableData.value = [];
        tableData.value.push(resp.data.data);
      })
      .catch((err) => {
        console.log(err);
      })
}

///添加
const FormVisible = ref(false);

const testPost = () => {
  axios.post("/coursefavorite", form.value)
      .then(resp => {
        console.log(resp.data);
        testGet();
      })
      .catch((err) => {
        console.log(err);
      })
  FormVisible.value = false;
}

//修改
const dialogFormVisible = ref(false);
const xiugaitanchukuang = (row) => {
  form.value = { ...row }; // 将行数据复制到表单中
  dialogFormVisible.value = true; // 显示对话框
};

const testPut = () => {
  console.log("Put.....")
  axios.put("/coursefavorite", {
    favoriteId: form.value.favoriteId,
    courseId: form.value.courseId,
    memberId: form.value.memberId,
    favoriteTime: null,

  }, {
    headers: {"Content-Type": "multipart/form-data"}
  })
      .then(resp => {
        console.log(resp);
        testGet();
        console.log("-------------------");
      })
      .catch(err => {
        console.log(err);
      })
  dialogFormVisible.value = false
}

//删除
const testDelete = (row) => {
  console.log("Delete.....")
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete("/coursefavorite", {
      params: {favoriteId: row.favoriteId}
    })
        .then(resp => {
          console.log(resp);
          testGet();
        })
        .catch(err => {
          console.log(err);
        })
  }).catch(() => {
    console.log('取消删除');
  })
}


//刷新
const shuaxin = () => {
  testGet();
}

//重置按钮
const openFullScreen2 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  setTimeout(() => {
    loading.close()
  }, 500)
  shuaxin();
}


onMounted(testGet)
</script>

<template>
  <div class="top">
    <div>
      课程收藏
      <div>
        文章编号
        <el-input v-model="shoucangbianhao" style="width: 240px" placeholder="请输入收藏编号"/>
        <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>
        <el-button type="warning" style="margin-left: 20px" @click="shuaxin" :icon="Refresh">重置</el-button>
      </div>
    </div>
    <div class="title">
      <el-button type="primary" @click="FormVisible = true">添加收藏</el-button>
    </div>
    <el-button class="shuaxin" type="primary" @click="openFullScreen2">点击刷新</el-button>
    <!--  显示全部数据-->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"/>
        <el-table-column property="favoriteId" label="收藏编号" width="160"/>
        <el-table-column property="courseId" label="课程编号" width="160"/>
        <el-table-column property="memberId" label="会员编号" width="160"/>
        <el-table-column property="favoriteTime" label="收藏时间" width="280"/>
        <el-table-column prop="scope" label="操作" width="220">
          <!--          插槽:修改和删除按钮-->
          <template #default="scope">
            <el-button type="primary" size="small" @click="xiugaitanchukuang(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="testDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!--  修改全部字段-->
  <el-dialog v-model="dialogFormVisible" title="修改收藏" width="500">
    <el-form :model="form">
      <el-form-item label="收藏编号" :label-width="fromLabelWidth">
        <el-input v-model="form.favoriteId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="课程编号" :label-width="fromLabelWidth">
        <el-input v-model="form.courseId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="会员编号" :label-width="fromLabelWidth">
        <el-input v-model="form.memberId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="发布时间" :label-width="fromLabelWidth">
        <el-input v-model="form.favoriteTime" autocomplete="off"/>
      </el-form-item>
      <!--  确认对话框-->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="testPut">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!--  添加收藏弹框-->
  <el-dialog v-model="FormVisible" title="添加收藏" width="400">
    <el-form :model="form">
      <el-form-item label=" 添加编号" :label-width="fromLabelWidth">
        <el-input autocomplete="off" placeholder="id自动生成"/>
      </el-form-item>
      <el-form-item label=" 课程编号" :label-width="fromLabelWidth">
        <el-input v-model="form.courseId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="会员编号 " :label-width="fromLabelWidth">
        <el-input v-model="form.memberId" autocomplete="off"/>
      </el-form-item>
<!--      <el-form-item label="收藏时间" :label-width="fromLabelWidth">-->
<!--        <el-input v-model="form.value.favoriteTime" autocomplete="off"/>-->
<!--      </el-form-item>-->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="FormVisible = false">取消</el-button>
        <el-button type="primary" @click="testPost()">确认</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>
.title {
  display: inline-block;
  margin-right: 30px;
}
</style>